<script setup lang="ts" name="UserAddEdit">
import { transformI18n } from '@/plugins/i18n'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
import { getRoleList } from '@/api/role'
const { getDictionaryEntryData } = useDictionaryEntry()
const statusList = ref([])
const props = defineProps({
  listData: { type: Array as any }
})
const departmentData = toRef(props, 'listData')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref({
  name: '',
  department: '',
  phone: '',
  email: '',
  status: true,
  role: [],
  remark: ''
})
// 显示新建/编辑部门弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    dialogTitle.value = 'buttons.buttonEdit'
    formData.value.name = v.userName
    formData.value.department = v.departmentID
    formData.value.phone = v.phone
    formData.value.email = v.email
    formData.value.status = v.status
    formData.value.role = v.roleID
    formData.value.remark = v.remark
  } else {
    dialogTitle.value = 'buttons.buttonCreate'
    formData.value.name = ''
    formData.value.department = ''
    formData.value.phone = ''
    formData.value.email = ''
    formData.value.status = true
    formData.value.role = []
    formData.value.remark = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}
const getStatusList = async () => {
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_boolean'
  })
}
getStatusList()

const roleList = ref([])
// 获取当前查询条件下的数据
const getRoleListData = () => {
  const result: any = {}
  result.name = ''
  getRoleList(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        res.data.forEach((item) => {
          item.label = item.name
          item.value = item.id
          roleList.value.push(item)
        })
      }, 1000)
    }
  })
}
getRoleListData()
</script>

<template>
  <el-dialog v-model="dialogVisible" width="720px" append-to-body :title="transformI18n(dialogTitle, true) + transformI18n('page.用户', true)">
    <el-form label-width="auto" label-position="right">
      <div class="el-form-group">
        <el-form-item :label="$t('page.姓名')">
          <el-input v-model="formData.name" :placeholder="$t('placeholders.请输入') + $t('page.姓名')" />
        </el-form-item>
        <el-form-item :label="$t('page.部门')">
          <el-tree-select v-model="formData.department" :data="departmentData" :render-after-expand="false" check-strictly :placeholder="$t('placeholders.请选择') + $t('page.部门')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.电话')">
          <el-input v-model="formData.phone" :placeholder="$t('placeholders.请输入') + $t('page.电话')" />
        </el-form-item>
        <el-form-item :label="$t('page.邮箱')">
          <el-input v-model="formData.email" :placeholder="$t('placeholders.请输入') + $t('page.邮箱')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px mb-6px">
        <el-form-item :label="$t('page.状态')">
          <el-radio-group class="radio-button" v-model="formData.status">
            <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value" border>{{ $t('page.' + item.label) }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item :label="$t('page.角色')">
        <el-select v-model="formData.role" multiple :placeholder="$t('placeholders.请选择') + $t('page.角色')">
          <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('page.备注')">
        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('placeholders.请输入') + $t('page.备注')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="modal-footer" ref="modalFooter">
        <el-button @click="handleCloseDialog">{{ $t('buttons.buttonCancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ $t('buttons.buttonConfirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item__content) {
    .el-radio-group {
      margin: 0;
    }
  }

  :deep(.el-form-item__label) {
    margin: 6px;
  }

  .el-form-group {
    display: flex;
    flex: 1;

    .el-form-item {
      flex: 1;
      margin: 0;
    }

    .el-form-item+.el-form-item {
      margin: 0;
    }
  }
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
